import { computed } from 'vue';
<template>
  <span :class="_sty.cls"> {{ _sty.text }} </span>

</template>

<script setup>
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

const prop = defineProps({
  status: {
    type: [String, Number],
    required: true
  },
})

const { t } = useI18n()

const _sty = computed(() => {
  let cls = ''
  let text = ''
  switch (prop.status) {
    case 1:
      cls = 'inline-flex px-2 text-xs font-semibold leading-5 text-green-800 bg-green-100 rounded-full'
      text = t('general.status.code.usable')
      break
    case 0:
      cls = 'inline-flex px-2 text-xs font-semibold leading-5 text-red-800 bg-red-100 rounded-full'
      text = t('general.status.code.unusable')
      break
  }

  return {cls, text}
})

</script>
